<template>
  <div>
    <el-form ref="form" :model="list" :rules="rules">
      <el-form-item v-if="showProv" class="inlineCt">
        <el-select
          v-model="list.provinceId"
          v-loading="provinceLoading"
          placeholder="省："
          style="width: 180px;"
          @change="provinceChange"
        >
          <el-option
            v-for="item in provinceOptions"
            :key="item.id"
            :label="item.areaName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showCity" label class="inlineCt inlineLabel10">
        <el-select
          v-model="list.cityId"
          v-loading="cityLoading"
          placeholder="市："
          style="width: 180px;"
          @change="cityChange"
        >
          <el-option
            v-for="item in cityOptions"
            :key="item.id"
            :label="item.areaName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showArea" label class="inlineCt inlineLabel10">
        <el-select
          v-model="list.areaId"
          v-loading="areaLoading"
          placeholder="区："
          style="width: 180px;"
          @change="areaChange"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.id"
            :label="item.areaName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as api from '@/api/components'

let defaultList = {
  provinceId: null,
  cityId: null,
  areaId: null
}

export default {
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    showProv: {
      type: Boolean,
      default: true
    },
    showCity: {
      type: Boolean,
      default: true
    },
    showArea: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      list: Object.assign({}, defaultList),
      rules: this.rules,
      provinceLoading: false,
      cityLoading: false,
      areaLoading: false,
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      selectArr: []
    }
  },
  watch: {
    value(newVal, oldVal) {
      console.log('watch value', newVal)
      this.filterOptions(newVal)
    }
  },
  created() {
    this.getProvince()
    this.filterOptions(this.value)
  },
  methods: {
    emitLabel() {
      let arr = ['', '']
      for (let i = 0; i < this.cityOptions.length; i++) {
        let item = this.cityOptions[i]
        if (item.id == this.list.cityId) {
          arr[0] = item.areaName
          break
        }
      }

      for (let i = 0; i < this.areaOptions.length; i++) {
        let item = this.areaOptions[i]
        if (item.id == this.list.areaId) {
          arr[1] = item.areaName
          break
        }
      }
      this.selectArr = arr
      this.$emit('changeLabel', arr)
    },
    /* 同步val值变化 */
    emitInput() {
      let arr = [this.list.provinceId, this.list.cityId, this.list.areaId]
      this.$emit('input', arr)
    },
    /* 回显值 */
    filterOptions(newVal) {
      if (newVal.length === 0) {
        this.resetId()
        return
      }
      this.list.provinceId = newVal[0]
      if (
        newVal[1] &&
        (this.cityOptions.length === 0 || this.list.cityId !== newVal[1])
      ) {
        this.getCity(newVal[0])
      }
      this.list.cityId = newVal[1] ? newVal[1] : null

      if (
        newVal[2] &&
        (this.areaOptions.length === 0 || this.list.areaId !== newVal[2])
      ) {
        this.getArea(newVal[1])
      }
      this.list.areaId = newVal[2] ? newVal[2] : null
    },
    /* 选择省 */
    provinceChange(id) {
      console.log('provinceChange', id)
      this.cityOptions = []
      this.list.cityId = null
      this.areaOptions = []
      this.list.areaId = null
      this.getCity(id)
      this.emitInput()
    },
    /* 选择市 */
    cityChange(id) {
      console.log('cityChange', id)
      this.areaOptions = []
      this.list.areaId = null
      this.getArea(id)
      this.emitInput()
      this.emitLabel()
    },
    /* 选择区 */
    areaChange(id) {
      console.log('areaChange', id)
      this.emitInput()
      this.emitLabel()
    },
    /* 获取省 */
    getProvince() {
      if (!this.showProv) {
        return
      }
      this.provinceLoading = true
      api
        .getProvince()
        .then(response => {
          this.provinceOptions = response.data
          this.provinceLoading = false
        })
        .catch(err => {
          this.provinceLoading = false
        })
    },
    /* 获取市 */
    getCity(id) {
      if (!this.showCity) {
        return
      }
      this.cityLoading = true
      api
        .getCity(id)
        .then(response => {
          this.cityOptions = response.data
          this.cityLoading = false
        })
        .catch(err => {
          this.cityLoading = false
        })
    },
    /* 获取区 */
    getArea(id) {
      if (!this.showArea) {
        return
      }
      this.areaLoading = true
      api
        .getArea(id)
        .then(response => {
          this.areaOptions = response.data
          let areaName = ''
          this.cityOptions.forEach(item => {
            if (item.id == this.list.cityId) {
              areaName = item.areaName
            }
          })
          this.areaOptions.unshift({
            areaName,
            id: this.list.cityId
          })
          this.areaLoading = false
        })
        .catch(err => {
          this.areaLoading = false
        })
    },
    /* 清空选择状态 */
    resetId() {
      this.list.provinceId = null
      this.list.cityId = null
      this.list.areaId = null
    }
  }
}
</script>
